/**
 * Created by Jimmy on 2018/12/2.
 */
<template>
  <div class="people-managment ">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/panel/project/staff' }">人员管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" size="small" class="fr mb-10" @click="editAccount">新建</el-button>
    <el-table
      :data="tableData"
      border
      :stripe= 'true'
      style="width:100%">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column prop="RealName" label="姓名" align="center" width="100"></el-table-column>
      <el-table-column prop="UserName" label="用户名" align="center" width="100"></el-table-column>
      <el-table-column prop="Phone" label="联系电话" align="center" ></el-table-column>
      <el-table-column prop="IsAdminX" label="管理员" align="center" width="100"></el-table-column>
      <el-table-column prop="IsOmX" label="经营联系人" align="center" width="100"></el-table-column>
      <el-table-column prop="IsPmX" label="项目负责人" align="center" width="100"></el-table-column>
      <el-table-column prop="IsQcX" label="质检负责人" align="center" width="100"></el-table-column>
      <el-table-column prop="LockedX" label="账户状态" align="center" width="100"></el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" plain @click="deleteUser(scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="editAccount(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :pageSize="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog center title="编辑人员" :visible.sync="dialogFormVisible" class="edit-p-dialog">
      <el-form v-model="form" ref="form" label-width="120px">
        <el-form-item label="姓名：">
          <el-input v-model="form.name" size="small" placeholder="请输入用户真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="form.teleNum" size="small" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input v-model="form.userName" size="small" placeholder="请输入用户名(用于登录)"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="form.password" size="small" placeholder="请设置密码"></el-input>
        </el-form-item>
        <el-form-item label="管理员：">
          <el-select v-model="form.adiminYN" placeholder="请选择" size="mini">
            <el-option
              v-for="item in form.adiminYNOptions"
              :key="item.index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营联系人：">
          <el-select v-model="form.contactYN" placeholder="请选择" size="mini">
            <el-option
              v-for="item in form.contactYNOptions"
              :key="item.index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目负责人：">
          <el-select v-model="form.chargeYN" placeholder="请选择" size="mini">
            <el-option
              v-for="item in form.chargeYNOptions"
              :key="item.index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="质检负责人：">
          <el-select v-model="form.qcYN" placeholder="请选择" size="mini">
            <el-option
              v-for="item in form.qcYNOptions"
              :key="item.index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="质检系数影响：">-->
          <!--<el-checkbox v-model="form.unc">产值统计不受质检系数影响</el-checkbox>-->
        <!--</el-form-item>-->
        <el-form-item label="岗位系数：">
          <el-input v-model="form.jc" size="small" placeholder="部门岗位系数"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="锁定账户：">
          <el-checkbox v-model="form.locked" class="danger">锁定</el-checkbox>
          <span class="locked">(锁定后无法登陆)</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEditAccout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        token:'',
        tableData:[],
        dialogFormVisible:false,
        currentPage:1,
        pageSize:10,
        total:0,
        rowid:'',
        form:{
          title:'创建账户',
          name:'',
          teleNum:'',
          jc:'',
          userName:'',
          password:'',
          adiminYN:'',
          adiminYNOptions:[
            {label:'是', value:true},
            {label:'否',value:false}
          ],
          contactYN:'',
          contactYNOptions:[
            {label:'是', value:true},
            {label:'否',value:false}
          ],
          chargeYN:'',
          chargeYNOptions:[
            {label:'是', value:true},
            {label:'否', value:false}
          ],
          qcYN:'',
          qcYNOptions:[
            {label:'是', value:true},
            {label:'否', value:false}
          ],
          locked:false,
          unc:false
        }
      };
    },
    created: function(){
      let user = JSON.parse(window.localStorage.getItem('access-user'))
      this.token = user.Token
      this.loadList(this.currentPage,true)
    },
    methods: {
      confirmEditAccout(){
        var args = {
          token:this.token,
          realname:this.form.name,
          username:this.form.userName,
          phone:this.form.teleNum,
          password:this.form.password,
          ispm:this.form.chargeYN,
          isom:this.form.contactYN,
          isadmin:this.form.adiminYN,
          locked:this.form.locked,
          isqc:this.form.qcYN,
          unc:this.form.unc,
          jc:parseFloat(this.form.jc)
        }
        if(this.rowid) {
          args.id = parseInt(this.rowid)
        }
//        console.log(args)
        this.$http.post(this.domain + '/user/edit',
          args
        ).then((response) => {
          if (response.data.Success) {
            this.$message.success(response.data.Msg)
            this.dialogFormVisible = false
            this.loadList(this.currentPage,false)
          } else {
            this.$message.error(response.data.Msg)
            this.dialogFormVisible = false
          }
        }).catch(function (response) {
          this.$message.error(response.data)
          this.dialogFormVisible = false
        })
      },
      deleteUser(row) {
//        console.log(row)
        if (row.ID) {
          this.$confirm('确认删除吗?', '提示', {
            confirmButtonClass: 'el-button--warning'
          }).then(() => {
            this.$http.post(this.domain + '/user/delete',
              {
                token:this.token,
                id:parseInt(row.ID)
              }
            ).then((response) => {
              if (response.data.Success) {
                this.$message.success(response.data.Msg)
                this.loadList(this.currentPage,false)
              } else {
                this.$message.error(response.data.Msg)
              }
              }).catch((response) => {
              this.$message.error(response.data)
            })
          }).catch(() => {})
        }
      },
      editAccount (row) {
        if(row.ID) {
          this.form.title = '编辑账户'
          this.rowid = row.ID
          this.form.name = row.RealName
          this.form.userName = row.UserName
          this.form.teleNum = row.Phone
          this.form.adiminYN = row.IsAdmin
          this.form.contactYN = row.IsOm
          this.form.chargeYN = row.IsPm
          this.form.locked = row.Locked
          this.form.qcYN = row.IsQc
          this.form.unc = row.Unc
          this.form.jc = row.Jc
          this.form.password = ''
        } else {
          this.rowid = ''
          this.form = {
            title:'创建账户',
            name:'',
            teleNum:'',
            userName:'',
            password:'',
            adiminYN:'',
            adiminYNOptions:[
              {label:'是', value:true},
              {label:'否',value:false}
            ],
            contactYN:'',
            contactYNOptions:[
              {label:'是', value:true},
              {label:'否',value:false}
            ],
            chargeYN:'',
            chargeYNOptions:[
              {label:'是', value:true},
              {label:'否',value:false}
            ],
            qcYN:'',
            qcYNOptions:[
              {label:'是', value:true},
              {label:'否', value:false}
            ],
            locked:false,
            jc:'',
            unc:false
          }
        }
        this.dialogFormVisible = true
//        console.log(this.form)
      },
      loadList(page,flag){
        this.$http.post(this.domain + '/user/list',
          {
            token:this.token,
            page:page
          }
        ).then((response) => {
          if (response.data.Success) {
//            console.log(response.data)
            this.total = response.data.Total
            this.tableData = response.data.Users
            this.tableData.forEach((obj) => {
              obj.IsAdminX = obj.IsAdmin ? "是":"否"
              obj.IsOmX = obj.IsOm ? "是":"否"
              obj.IsPmX = obj.IsPm ? "是":"否"
              obj.LockedX = obj.Locked ? "锁定":"正常"
              obj.IsQcX = obj.IsQc ? "是":"否"
            })
            if (flag) {
              this.$message.success(response.data.Msg)
            }
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      handleCurrentChange(page){
        this.currentPage = page
        this.loadList(this.currentPage,true)
      }
    }
  }
</script>
<style>
  .people-managment>h4{
    line-height: 36px;
    height: 36px;
  }
  .edit-p-dialog .el-dialog__body{
    padding-right: 60px;
  }
  .edit-p-dialog  .el-dialog{
    width: 450px;
  }
  .locked{
    color: red;
    font-size: 12px;
  }
  .el-form-item__label{
    font-weight: 700;
  }

</style>

